<template>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      class="viewContainer"
    >
    <table
      border="1"
      style="border-collapse: collapse; width: 100%"
    >
      <caption v-if="viewData" style="font-size:18px;font-weight:600">
        路由信息
      </caption>
      <tr v-if="viewData">
        <th>Destination/Mask</th>
        <th>代理</th>
        <th>Pre</th>
        <th>Cost</th>
        <th>Flags</th>
        <th>下一跳</th>
        <th>接口</th>
      </tr>
      <tr v-for="(item, index) of viewData" :key="index">
        <th v-for="(citem, cindex) of item" :key="cindex">{{ citem }}</th>
      </tr>
    </table>
    </div>
</template>

<script>
import { getJavaServerData } from "@/api/index.js";
import bus from "common/bus.js";
export default {
  data() {
    return {
      viewData: "",
      timerName: "MonitorInfoNetworkVersion",
      timerEventName: "timerMonitorInfoNetworkVersion",
      selectedMonID: "",
      loading: false,
    };
  },
  created() {
    // this.selectedMonID = this.$store.getters["ItemMonitorServer/getItem"];
    // this.getInfo();

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getInfo();
      }
    });
  },
  mounted() {
    bus.$on("ItemMonitorServer", (msg) => {
      this.resetData();
      this.selectedMonID = msg;
      this.getInfo();
    });
  },
  methods: {
    getInfo() {
      // this.loading = true;
      getJavaServerData("/Sp/networkroutingtable", {
        hid: this.selectedMonID.MONID,
      })
        .then((_) => {
          //4
          this.viewData = this.filterData(6,_)
          
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    filterData(startIndex,data){
      let res = []
      for(let i = startIndex;i<data.length;i++){
        
        if(data[i][0]==""||data[i].split(" ").filter((res) => res).length ===1){
          continue;
        }
        res.push(data[i].split(" ").filter((res) => res));
      }
      return res
    },
    resetData() {
      this.viewData = "";
    },
  },
  beforeDestroy() {
    // 页面关闭前，移除定时器任务
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
  },
};
</script>

<style lang="scss" scoped>
.viewContainer {
  padding: 15px;
  //   background: #fff;
  //   border: 1px solid #ddd;
  //   border-radius: 5px;
  //   min-height: 300px;
  // max-height: 70vh;
  // // width: 100%;
  // overflow-y: scroll;
}
.viewContainer::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.viewContainer::-webkit-scrollbar-thumb {
  background-color: 	#E0E0E0;
  border-radius: 3px;
}
</style>
